<template>
	<view>
					<scroll-view style="height:100vh;"  :scroll-y="true" @scrolltolower="scrolltolowerfn" lower-threshold="200"> 
	<view class="top-warp flex-content" v-if="detaildata.status==0">
		<view class="flex-content p-l-34" >
			<view class="icon-content flex-content">
				<u-icon name="info" color="#fff" size="18"></u-icon>
			</view>
			<view class="p-l-10">
		平台提醒：请根据实际用车需求挑选司机		
			</view>
		</view>
	</view>
	<view class="top-warp flex" v-if="detaildata.status==3" style="background-color: #BBBBBB;">
		<view class="flex-content p-l-34" style="color: #FFFFFF;" >
			
				<image style="width: 28rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e06d9f07-22c4-452d-8fbb-6dcc4e87be48/e6c59e62-f57d-438a-94eb-f83b952b6ee4.png" mode="widthFix"></image>
			
			<view class="p-l-10">
		已取消	
			</view>
		</view>
	</view>
	<view class="top-warp flex" v-if="detaildata.status==2" style="background-color: #BBBBBB;">
		<view class="flex-content p-l-34" style="color: #FFFFFF;" >
			
				<image style="width: 28rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e06d9f07-22c4-452d-8fbb-6dcc4e87be48/e6c59e62-f57d-438a-94eb-f83b952b6ee4.png" mode="widthFix"></image>
			
			<view class="p-l-10">
		 服务已结束:{{detaildata.service_time}}天23时59分59秒
			</view>
		</view>
	</view>
	<view class="top-warp flex" v-if="detaildata.status==1" style="background-color:  #FD7D5C;">
		<view class="flex-content p-l-34" style="color: #FFFFFF;" >
			
				<image style="width: 28rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e06d9f07-22c4-452d-8fbb-6dcc4e87be48/e6c59e62-f57d-438a-94eb-f83b952b6ee4.png" mode="widthFix"></image>
			
			<view class="p-l-10">
		服务进行中：{{timecontent}}
			</view>
		</view>
	</view>
		<view class="p-20">
		<view class="warp-content flex bg-white row-between">
			<view class="lg" style="color: #646363;margin-left: 28rpx;">
				订单金额
			</view>
	
			<view class="flex-content lg" style="color: #E85631;margin-right: 40rpx;">
				{{detaildata.status==0||detaildata.status==3?'我的出价：':'我的成交价：'}} {{ detaildata.status==0||detaildata.status==3?detaildata.money:detaildata.quote_money}}元/趟
			</view>
			
		</view>
		</view>
		<view class="p-20">
			<view class="bg-white" style="width: 100%;">
				<view class="distrubution-content flex row-between p-t-24">
					<view class="flex">
						<view class="my-icon m-l-40">
							
						</view>
						<view class="lg m-l-30" style="color: #807F7F;">
							配送信息
						</view>
					</view>
					<view class="p-r-30">
						
				
					<view class="" v-if="dismsg" @click="dismsgcontrol(1)"  style="transform: rotate(270deg);">
						<u-icon name="arrow-right-double" color="#807F7F" size="28"></u-icon>
					</view>
					
					<view crass="" v-else @click="dismsgcontrol(1)"  style="transform: rotate(90deg);">
						<u-icon name="arrow-right-double" color="#807F7F" size="28"></u-icon>
					</view>
						</view>
				</view>
				<view class="" v-show="dismsg">
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
						装车时间
					</view>
					<view class="right-content flex row-between">
				          <view class="lg">
				           {{detaildata.drtime}}
				          </view>
						
					</view>
				</view>
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
                          服务时长
					</view>
					<view class="right-content flex ">
						<view class="lg">
							<view class="lg">
								{{detaildata.service_time}}  天
							</view>
						</view>
				        
						  
					</view>
				</view>
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
				          需要车型
					</view>
					<view class="right-content flex row-between">
						<view class="lg" @click="selectCar()" >
							<view >{{detaildata.category_name}}-{{detaildata.car_name}}</view>
							
						</view>
				     
						  
					</view>
				</view>
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
				          装货地址
					</view>
					<view class="right-content flex row-between">
						<view class="lg" >
							{{detaildata.loading_address}}
						</view>
				          
						  
					</view>
				</view>
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
				          配送区域
					</view>
					<view class="right-content flex row-between">
						<view class="lg" >
							{{detaildata.distribution_address}}
						</view>
				          
						  
					</view>
				</view>
				
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
				          运输里程
					</view>
					<view class="right-content flex row-between">
						<view class="lg" >
							{{detaildata.distance}}
						</view>
				          
						  
					</view>
				</view>
			</view>
		</view>
			</view>
		<view class="p-20">
			<view class="bg-white" style="width: 100%;">
				<view class="distrubution-content flex row-between p-t-24">
					<view class="flex">
						<view class="my-icon m-l-40">
							
						</view>
						<view class="lg m-l-30" style="color: #807F7F;">
							其他信息
						</view>
					</view>
					<view class="p-r-30">
					<view class="" v-if="disothermsg" @click="dismsgcontrol(2)"  style="transform: rotate(270deg);">
						<u-icon name="arrow-right-double" color="#807F7F" size="28"></u-icon>
					</view>
					<view class="" v-else @click="dismsgcontrol(2)"  style="transform: rotate(90deg);">
						<u-icon name="arrow-right-double" color="#807F7F" size="28"></u-icon>
					</view>
					
						
					</view>
				</view>
				<view class="" v-show="disothermsg">
					
				
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
						单位名称
					</view>
					<view class="right-content flex row-between">
				          <view class="lg">
				       {{detaildata.name}}
				          </view>
						
					</view>
				</view>
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
		                  结算方式
					</view>
					<view class="right-content flex ">
						<view class="lg">
							{{detaildata.settlement_type}}
						</view>
				          
						  
					</view>
				</view>
				<view class="flex h-100">
					<view class="left-content lg p-l-30">
				          货物类型
					</view>
					<view class="right-content flex ">
						<view class="lg" >
						{{detaildata.type}}
						</view>
				          
						  
					</view>
				</view>
				<view class=" p-t-20" style="display: flex;">
					<view class="left-content lg p-l-30">
				          补充说明
					</view>
					<view class="right-content flex row-between" style="border: none;">
						<view class="" style="width: 100%;">
								{{detaildata.note!=' '?	`${detaildata.note}`:`无`}}
						</view>
				          
						  
					</view>
				</view>
		
					</view>
					</view>
		</view>
		<view class="p-20" v-if="detaildata.status==1||detaildata.status==2">
			<view class="bg-white p-b-48" style="width: 100%;">
				<view class="distrubution-content flex row-between p-t-24">
					<view class="flex">
						<view class="my-icon m-l-40">
							
						</view>
						<view class="lg m-l-30" style="color: #807F7F;">
							司机信息
						</view>
					</view>
					<view class="p-r-30">
				</view>
			</view>
			<view class="m-t-32" style="display: flex;">
				<view class="dr-img flex-content">
					<image :src="drdata.avatar" mode="widthFix"></image>
				</view>
						<view class="driver-msg " style="margin-left: 46rpx;">
							<view class="car-content flex">
								<view class="car-number xxl bold">
									{{drdata.licence}}
								</view>
								<view class="m-l-30" style="color: #605F5F;">
									{{drdata.car_type}}
								</view>
								
								</view>
								<view class="m-t-18" style="color: #605F5F;">
									{{drdata.spe}}
								</view>
								<view class="flex m-t-10" style="color: #605F5F;">
									<view class="" >
										{{drdata.driver_name}}
									</view>
									<view class="flex-content m-l-34">
										<image style="width: 32rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e06d9f07-22c4-452d-8fbb-6dcc4e87be48/4d71af7c-f67d-4a8c-a2d3-f0852d7724e2.png" mode="widthFix"></image>
										<view class="m-l-10">
											{{drdata.star?drdata.star:0}}
										</view>
										
									</view>
							</view>
							<view class="m-t-18 flex" @click="sendphone">
								{{drdata.user_mobile}}
								<view class="phone-icon flex-content m-l-10">
									<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e06d9f07-22c4-452d-8fbb-6dcc4e87be48/79292fdc-ed87-481e-bd61-0c63cdb8070a.png" mode="widthFix"></image>
								</view>
							</view>
						</view>	
						<view class="car-img flex-content">
							<image :src="drdata.left_img" mode="widthFix"></image>
						</view>
			</view>
		</view>
			</view>
		<view class="flex-content md" style="width: 100%;padding-top: 26rpx; padding-bottom: 26rpx;color: #807F7F;" v-if="detaildata.status==0" >
			{{lists.length==0?'暂无司机报价':'请从以下列表中选择司机'}}
		</view>

		      <view>
				  <block v-for="(item,index) in lists" :key="index">
				  <driver-list v-if="detaildata.status==0" :item="item" :driverId="driverId" @selectDriver="selectDriver"></driver-list>
		</block>
			</view>
				 <view class="p-32"  v-if="detaildata.status==1">
				 	<view class="btn-colse xxl flex-content" @click="closeServe">
				 		提前结束服务
				 	</view>
				 </view>
		<view class="btm-content bg-white flex-content" v-if="detaildata.status==0">
			<view class="cancel-order xxl flex-content" @click="modalshow=true">
				取消订单
			</view>
			<view class="affirm-btn xxl flex-content" @click="affrimOrder">
				确认
			</view>
		</view>
		  </scroll-view >
		<view class="" style="height: 132rpx;">
			
		</view>
		<u-modal v-model="modalend" content="您确定提前结束服务" :show-cancel-button="true" @confirm="affirmend"></u-modal>
		<u-modal v-model="modalshow" content="您确定取消订单" :show-cancel-button="true" @confirm="affirmconfirm"></u-modal>
	</view>
</template>

<script>
	import {baseURL} from "@/config/app.js"
	import {businessOrdercancel,getUserDriver,end_task} from "@/api/user"
	import {businessOrderdetails,businessOrderQuote,businessOrderChoice} from "@/api/order"
	import {selectTimeList} from "@/utils/tools"

	export default {
		data() {
			return {
				lists:[],
				timer:null,
				timecontent:"",	
				scroll:{
					limit:10,
				page:1,
				id:0
					},
			modalend:false,
             pagecount:"",
           driverId:0,
			detaildata:{},
			modalshow:false,
			dismsg:false,
			disothermsg:false,
			timeobj:{},
			remarkvalue:"",
			companyname:"",
			selecttime:"",
			startaddress:"",
			settlemode:"",
			money:"",
			timestamp:"",
			transportlength:"",
			thingtype:"",
			timelengtth:"",
			info:{
				car_category_id:"",
				car_id:""
			},
			endaddress:"",
			typeValue:"请选择车型",
			selectitem:{},
			drdata:{}
			}
		},
		 onLoad(option) {
			//生成选择时间
			let id=option.id
			 this.getData({id})
			 this.scroll.id=id
			this.timeobj=selectTimeList()
			this.getdata()
	       this.selecttime=`${this.timeobj.selecttime[0][0]}  ${this.timeobj.selecttime[1][0]}`
              // this.changtime(this.selecttime)
		},
		beforeDestroy() {
					clearInterval(this.timer)
					this.timer=null
				},
		methods:{
			async affirmend(){
				await end_task({id:this.detaildata.id,driver_id:this.detaildata.driver_id})	
				 this.getData({id:this.detaildata.id})
			},
			//关闭服务
			async closeServe(){
			
				this.modalend=true
			},
			sendphone(){
				uni.makePhoneCall({phoneNumber:this.drdata.user_mobile})
			},
			 intervalTime(endTime){
			    // var timestamp=new Date().getTime(); //计算当前时间戳
			    var timestamp = (Date.parse(new Date())) / 1000;//计算当前时间戳 (毫秒级)
			    var date1 = ""; //开始时间
			
			    date1 = timestamp; //开始时间
			
			
			    var date2 = endTime; //结束时间
			    // var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
			    var date3 = (date1 - date2) * 1000; //时间差的毫秒数
			   
			    //计算出相差天数
			    var days = Math.floor(date3 / (24 * 3600 * 1000));
			        let daycount=days
			    if (days < 10) {
			    
			        days = `0${days}`
			    }
			    //计算出小时数
			
			    var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
			    var hours = Math.floor(leave1 / (3600 * 1000));
			    let hourscount=hours
			    if (hours < 10) {
			        hours = `0${hours}`
			    }
			    //计算相差分钟数
			    var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
			    var minutes = Math.floor(leave2 / (60 * 1000));
			    let minutescount =minutes
			    if (minutes < 10) {
			        minutes = `0${minutes}`
			    }
			    //计算相差秒数
			
			    var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
			    
			    var seconds = Math.round(leave3 / 1000);
			    let secondscount = seconds
			    if (seconds < 10) {
			        seconds = `0${seconds}`
			    }
			     return days+'天' + hours+'时'+minutes+'分'+seconds+"秒"
				 },
			//确认订单
			async affrimOrder(){
				await businessOrderChoice({id:this.detaildata.id,driver_id:this.selectitem.driver_id})
				    this.getData({id:this.detaildata.id})
			},
			selectDriver(item){
				this.driverId=item.id
				this.selectitem=item
			},
				async scrolltolowerfn(){
					
			 				this.scroll.page=this.scroll.page+1
							if(this.scroll.page<=this.pagecount){
								await this.getdata()
							}
							
						},
						async getdata(){
						let res=await businessOrderQuote(this.scroll)
						
							this.pagecount=Math.ceil(res.data.count/10)
						
							
							this.lists=[...this.lists,...res.data.lists]
							return res.data
								
						},
			//查看更多信息
			dismsgcontrol(type){
				if(type==1){
					this.dismsg=!this.dismsg
				}else if(type==2){
					this.disothermsg=!this.disothermsg
				}
			},
			//获取数据
		 async	getData(id){
			 
			let {data,code}=await businessOrderdetails(id)
		     if(data.status==0){
				 uni.setNavigationBarTitle({
				 	title:"挑选司机"
				 })
			 }
			 let drtime= this.changtime(data.loading_time)
			this.detaildata=data
			this.detaildata.drtime=drtime
				let time=this.detaildata.single_time
				if(this.detaildata.status==1||this.detaildata.status==2){
					let res= await getUserDriver({driver_id:this.detaildata.driver_id})
					this.drdata=res.data
				}
			if(this.detaildata.status==1){
			this.timer=setInterval(()=>{
			   
			 
			  // console.log(time);
				this.timecontent=this.intervalTime(time)
			// console.log(this.timecontent);
			},1000)
			
			
			}
			},
			//确认下单
			
			selectCar(){
				uni.navigateTo({
					url:'/bundle/pages/dr_apply/select_car'
				})
			},
		 async	affirmconfirm(){
			
           await businessOrdercancel({id:this.detaildata.id})
		
		   // this.$toast({
			  //  title:"取消成功"
		   // })
			},
     changtime(item){
	let date=new Date(item*1000)
	 var month = date.getMonth() + 1;
	  var curDate = date.getDate();
	  var curHours = date.getHours();
	  var curMinutes = date.getMinutes();
		  if (month >= 1 && month <= 9) {
		    month = "0" + month;
		  }
		  if (curDate >= 0 && curDate <= 9) {
		    curDate = "0" + curDate;
		  }
		  if (curHours >= 0 && curHours <= 9) {
		    curHours = "0" + curHours;
		  }
		  if (curMinutes >= 0 && curMinutes <= 9) {
		    curMinutes = "0" + curMinutes;
		  }
		  return  `${month}月${curDate}日   ${curHours}:${curMinutes}`
}
		}
	}
</script>

<style scoped lang="scss">
	.btn-colse{
		width: 100%;
		height: 108rpx;
		color: #FFFFFF;
		background-color: #E85631;
		border-radius: 10rpx;
	}
	.car-img{
		margin-top: 58rpx;
		width: 150rpx;
		height: 144rpx;
		
		// background-color: #F29100;
		border-radius: 10rpx;
		overflow: hidden;
		image{
			width: 100%;
		}
	}
	.phone-icon{
		width: 48rpx;
		border-radius: 300rpx;
		height: 48rpx;
		border: 2rpx solid #49B582;
		image{
			width: 24rpx;
		}
	}
	.car-number{
		position: relative;
		
	}
	.car-number::after{
		position: absolute;
		content: "";
		width: 2rpx;
		height: 40rpx;
		top: 0rpx;
		right: -16rpx;
		background-color: #D2D2D2;
	}
	.dr-img{
		width: 104rpx;
		height: 104rpx;
		background-color: #F29100;
		border-radius: 100rpx;
		overflow: hidden;
		margin-left: 60rpx;
		margin-top: 52rpx;
		image{
			width: 100%;
		}
	}
	.affirm-btn{
		background-color: #E85631 ;
		height: 94rpx;
		width: 500rpx;
		border-radius: 10rpx;
		color: #FFFFFF;
		margin-left: 16rpx;
	}
	.btm-content{
		position: fixed;
		bottom: 0rpx;
		height: 140rpx;
		width: 100%;
		padding-left: 24rpx;
		padding-right: 24rpx;
		height: 140rpx;
		
		.cancel-order{
			width: 260rpx;
			height: 94rpx;
			background-color: #EAEAEA;
			border-radius: 10rpx;
			color: #807F7F;
		}
	}
	.icon-content{
		width: 40rpx;
		height: 40rpx;
		background-color: #C6B061 ;
		border-radius: 30rpx;
	}
	.top-warp{
		height: 88rpx;
		width: 100%;
		color: #C6B061  ;
		background-color: #FFFDF6 ;
	}
	.p-r-30{
		
	}
	// .affirm-btn{
	// 	color: #FFFFFF;
	// 	background-color: #E85631;
	// 	width: 248rpx;
	// 	height: 70rpx;
	// 	border-radius: 10rpx;
	// }
	.money-content{
		padding-left: 18rpx;
		width: 278rpx;
		height: 66rpx;
		background-color: #F9F9F9;
	}
	.h-100{
		width: 100%;
		height: 100rpx;
	}
	.left-content{
		
		color:#807F7F;
	}
.warp-content{
	width: 100%;
	border-radius: 10rpx;
	height: 94rpx;
}
.title-btm{
	position: relative;
}
.title-btm::before{
	content: "";
	width: 2rpx;
	left: -10rpx;
	height: 40rpx;
	position: absolute;
	background-color: #EAEAEA ;
}
.list-btn{
	width: 144rpx;
	height: 52rpx;
	margin-right: 38rpx;
	border-radius: 6rpx;
	box-shadow: 0rpx 0rpx 10rpx #A2997A;
}
.p-20{
	padding: 20rpx;
}
.my-icon{
	width: 10rpx;
	height: 38rpx;
	border-radius: 5rpx;
	background-color: #8282D2;
}
.distrubution-content{
	height: 88rpx;
	width: 100%;
	border-bottom: 2rpx solid #F4F4F4;
}
.right-content{
	height: 100%;
	width: 445rpx;
	margin-left: 80rpx;
	border-bottom: 7rpx solid #F4F4F4;
}
.btm-content{
	width: 100%;
	height: 132rpx;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0rpx;
	
}
</style>
